<template>
  <view class="container">
    <topBarNvue :pageIndex="pageIndex"></topBarNvue>
    <!--新朋友-->
    <uni-card shadow="0px 0px 0px 0px rgba(0,0,0,0)" class="card">
      <navigator
        url="/pages/friends/new_friends"
        open-type="navigate"
        hover-class="navigator-hover"
        animation-type="pop-in"
      >
        <view class="item">
          <text>新的朋友</text>
          <uni-icons
            type="right"
            size="24"
            class="icon"
          />
        </view>
      </navigator>
      <view class="item">
        <text>仅聊天的朋友</text>
        <uni-icons
          type="right"
          size="24"
          class="icon"
        />
      </view>
      <view class="item">
        <text>群通知</text>
        <uni-icons
          type="right"
          size="24"
          class="icon"
        />
      </view>
    </uni-card>
    <!--联系人-->
    <view>

    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {onShow} from '@dcloudio/uni-app';
import topBarNvue from "../../components/top_bar.nvue"

//每次页面加载时调用
const pageIndex = ref(0)
onShow(() => {
	//改变头部右侧图标
	pageIndex.value = 2
	
})
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .card{
    .item{
        font-size: 16px;
        color: #000;
        padding-bottom: 40rpx;
        border-bottom: 1px solid #eee;
        padding-top: 20rpx;
        display: flex;
        .icon{
          margin-left: auto;
        }
        &:active{
          background-color: #e7e7e7;
          border-radius: 10rpx;
        }
    }
    
  }
}
</style>